<template>
    <div class="photoDetailsBox">
        <div v-if="isBatch" class="allElection clearFix">
            <div class="all">
                <el-checkbox :indeterminate="(check.length>0&&!isIndeterminate)?true:false" v-model="checkAll"
                    @change="handleCheckAllChange">全选
                </el-checkbox>
                <label>已选择{{check.length}}张</label>
            </div>
            <div class="handleList">
                <el-dropdown trigger="click" placement="bottom">
                    <el-button size="small">排序方式</el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <el-button type="text" @click="photoSort = 1">最新上传在前</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button type="text" @click="photoSort = 2">最新上传在后</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button type="text" @click="photoSort = 3">最新拍摄在前</el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <el-button type="text" @click="photoSort = 4">最新拍摄在后</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button size="small" style="margin-left: 12px" @click="moveAlbum=true"
                    v-if="album.userid == userInfo.id">移动到相册</el-button>
                <el-button size="small" @click="photoEditingM('open')" v-if="album.userid == userInfo.id">编辑照片信息
                </el-button>
                <el-button size="small" @click="handleDeleteRecord" v-if="album.userid == userInfo.id">删除</el-button>
                &nbsp;&nbsp;
                <el-button size="small" @click="albumReprintFriends('batch')" v-if="album.userid !== userInfo.id
                && album.reprint"
                    slot="reference">转载</el-button>
            </div>
            <div class="finish">
                <el-button type="text" @click="isBatch=false">完成管理</el-button>
            </div>
        </div>

        <div v-if="isBatch" class="editAlbum clearFix">
            <div class="AlbumName">
                <label>{{album.photoname}}</label>
                <!-- <el-button size="small" @click="EditingGroup=true">编辑相册信息</el-button> -->
                <!-- <span>直接拖到照片可调整照片顺序</span> -->
            </div>
            <div class="crumbs">
                <!-- <i class="el-icon-arrow-left"></i>
                <label>1 / 2</label>
                <i class="el-icon-arrow-right"></i> -->
            </div>
        </div>
        <!-- 相片操作栏 -->
        <div v-if="!isBatch" class="coverVisitors clearFix">
            <div class="cover">
                <el-image :src="album.cover | pictureUrl">
                    <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                    </div>
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
            </div>

            <div class="className">
                <div class="name">
                    <label>{{album.photoname}}</label>
                    <span class="number">{{album.picturesNum}}张</span>
                    <span class="line">/</span>
                    <span class="dropdownLink">权限:{{album.jurisdictionname}}</span>
                </div>
                <div class="uploadBtnBox">
                    <el-button size="small" @click="uploadPhotosTo" v-if="album.userid == userInfo.id">上传照片</el-button>
                    &nbsp;
                    <el-dropdown trigger="click" placement="bottom">
                        <el-button size="small">排序方式</el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <el-button type="text" @click="photoSort = 1">最新上传在前</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button type="text" @click="photoSort = 2">最新上传在后</el-button>
                            </el-dropdown-item>
                            <!-- <el-dropdown-item>
                                <el-button type="text" @click="photoSort = 3">最新拍摄在前</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button type="text" @click="photoSort = 4">最新拍摄在后</el-button>
                            </el-dropdown-item> -->
                        </el-dropdown-menu>
                    </el-dropdown>&nbsp;
                    <el-button size="small" type="text" @click="isBatch=true">批量管理</el-button>
                    <!-- <el-button size="small" type="text">更多</el-button> -->
                    <el-button size="small" type="text" @click="handleisShowPhotoDetail">返回</el-button>
                </div>
            </div>

            <div class="visitors clearFix">
                <div class="list">
                    <label>访客</label>
                    <span>{{album.viewnum}}</span>
                </div>
                <!-- <div class="list">
                    <label>评论</label>
                    <span>{{album.commentnum}}</span>
                </div> -->
                <div class="list">
                    <label>赞</label>
                    <span>{{album.givenum}}</span>
                </div>
            </div>
        </div>
        <!-- 相片列表 -->
        <ul class="photoBox clearFix">
            <li class="photoList" v-for="(item, index) in albumPhotolist.list" :key="index">
                <div class="photo">
                    <el-image :src="item.pictureurl | pictureUrl" @click="isBatchDetails(item)" fit>
                        <div slot="placeholder" class="image-slot" @click="isBatchDetails(item)">
                            加载中<span class="dot">...</span>
                        </div>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <div class="check" v-if="isBatch">
                        <el-checkbox-group v-model="check" @change="handleCheckChange">
                            <el-checkbox :label="item">{{item.id?' ':' '}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="edit">
                        <el-button v-if="album.userid !== userInfo.id && album.reprint" size="mini" type="text"
                            @click="albumReprintFriends(item)">转载</el-button>
                        <el-dropdown trigger="click" placement="bottom" v-if="album.userid == userInfo.id">
                            <el-button size="mini" type="text" icon="el-icon-caret-bottom"
                                v-if="album.userid == userInfo.id">操作</el-button>
                            <el-dropdown-menu slot="dropdown" v-if="album.userid == userInfo.id">
                                <el-dropdown-item>
                                    <el-button type="text" @click="photoEditingM(item)" style="width:100%">编辑
                                    </el-button>
                                </el-dropdown-item>
                                <!-- <el-dropdown-item>
                                    <el-button type="text">设为封面</el-button>
                                </el-dropdown-item> -->
                                <el-dropdown-item>
                                    <el-button type="text" @click="moveAlbumM(item)">移动相册</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button type="text" @click="batchDeletePicture(item)" style="width:100%">删除
                                    </el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="fabulous clearFix">
                        <label class="fabu">{{item.picturename}}</label>
                        <!-- <label class="comment">评论：{{item.commentnum}}</label> -->
                    </div>
                </div>
                <div class="describe">
                    <span>{{item.creationtime}}</span>
                </div>
            </li>
        </ul>

        <!--编辑照片信息-->
        <el-dialog :title="'编辑照片信息'" :visible.sync="photoEditing" width="460px" center>
            <el-form ref="pictureUpForm" :model="pictureUpForm" label-width="80px">
                <el-form-item label="名称">
                    <el-input type="text" placeholder="请输入内容" v-model="pictureUpForm.picturename" maxlength="10"
                        :show-word-limit="true"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="pictureUpForm.describe"
                        maxlength="50" :show-word-limit="true"></el-input>
                </el-form-item>
                <el-form-item style="text-align: right;">
                    <el-button type="primary" size="small" @click="updatePicture">确定</el-button>
                    <el-button size="small" @click="photoEditing=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--转载图片-->
        <el-dialog title="转载图片" :visible.sync="reprietAlbum" width="420px" center v-if="albumlistMy">
            <el-select v-model="uploadTo" placeholder="请选择需要转载到的相册" size="mini">
                <el-option :label="item.photoname" :value="item.id" v-for="(item, index) in albumlistMy.list"
                    :key="index"></el-option>
            </el-select>
            <div class="floatR">
                <el-button type="text" @click="albumReprintFriends('do')">确定转载</el-button>
            </div>
        </el-dialog>
        <!--图片详情转载图片-->
        <el-dialog title="转载图片" :visible.sync="reprietAlbum1" width="420px" center v-if="albumlistMy">
            <el-select v-model="uploadTo" placeholder="请选择需要转载到的相册" size="mini">
                <el-option :label="item.photoname" :value="item.id" v-for="(item, index) in albumlistMy.list"
                    :key="index"></el-option>
            </el-select>
            <div class="floatR">
                <el-button type="text" @click="albumReprintFriendsO('do')">确定转载</el-button>
            </div>
        </el-dialog>
        <!--移动到相册-->
        <el-dialog title="移动相册" :visible.sync="moveAlbum" width="660px" center>
            <div class="floatR">
                <el-select v-model="uploadTo" placeholder="请选择需要移动到的相册" size="mini">
                    <el-option :label="item.photoname" :value="item.id" v-for="(item, index) in albumlist1.list"
                        :key="index"></el-option>
                </el-select>
            </div>
            <div class="chooseAlbumBox clearFix">
                <div class="establish clearFix">
                    <div class="cover">
                        <el-image :src="album.cover | pictureUrl">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                        <div class="checked">
                            <i class="el-icon-circle-check"></i>
                        </div>
                    </div>
                </div>
                <div class="establish clearFix" @click="centerDialogVisible=true">
                    <div class="establish_icon">
                        <i class="el-icon-d-arrow-right"></i>
                    </div>
                </div>
                <div class="establish clearFix">
                    <div class="cover">
                        <el-image :src="uploadToUrl | pictureUrl">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                </div>
            </div>
            <div class="floatR">
                <el-button type="primary" @click="removePicture">确定移动</el-button>
            </div>
        </el-dialog>
        <!--放大详情-->
        <div v-if="isEnlarge" class="enlargeBox">
            <div class="enlargeInner clearFix">
                <el-row>
                    <el-col :span="16">
                        <div class="enlarge">
                            <el-carousel :interval="4000" height="600px" :autoplay='false' @change='changPhoto'
                                :initial-index='pictureIdC' trigger="click" :loop='false'>
                                <el-carousel-item v-for="(item) in albumPhotolist.list" :key="item.id" :name='item.id'
                                    @click="changeItem(item)">
                                    <img :src="item.pictureurl | pictureUrl" :title="item.picturename"
                                        style="width:90%; height:98%" />
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="enlargeDetails">
                            <i class="el-icon-circle-close close" @click="isEnlargeClose"></i>
                            <div class="photoDescription clearFix">
                                <div class="avatar">
                                    <el-avatar :size="50" :src="album.header | pictureUrl" @error="errorHandler">
                                        <img :src="src" />
                                    </el-avatar>
                                </div>
                                <div class="photoBy">
                                    <label class="byName">{{album.username?album.username:userInfo.username}}</label>
                                    <label class="uploadTiem">上传于：{{photoTemporary.creationtime}}</label>
                                    <label class="comefrom">来自：<span>{{album.photoname}}</span></label>
                                </div>
                            </div>
                            <div class="describe">
                                <label>{{photoTemporary.describe}}</label>
                            </div>

                            <div class="forwardBox">
                                <label :class="isActive === 'pictureGive'?'active':'' "
                                    @click="isActive = 'pictureGive'">点赞
                                    <span>{{giveTotal||photoTemporary.givenum}}</span></label>
                                <el-divider direction="vertical"></el-divider>
                                <label :class="isActive === 'pictrureComment'? 'active':'' "
                                    @click="isActive = 'pictrureComment'">评论
                                    <span>{{commentTotal || photoTemporary.commentnum}}</span></label>
                                <el-divider direction="vertical" v-if="album.reprint"></el-divider>
                                <label :class="isActive === 'pictrureForward'? 'active':'' "
                                    @click="isActive = 'pictrureForward'" v-if="album.reprint">转发
                                    <span>{{forwardTotal || photoTemporary.transmitnum}}</span></label>
                            </div>

                            <!--点赞-->
                            <div class="dianZan" v-if="isActive==='pictureGive'">
                                <el-button type="text" @click="photoGive(0)" v-if=" giveActive==0 "><i
                                        class="iconfont icon-zan"></i></el-button>
                                <el-button type="text" @click="photoGive(1)" v-else
                                    :class="{'text-black':giveActive==1}"><i class="iconfont icon-zan"></i></el-button>
                                <label v-for="(item,index) in pictureGiveP.list" :key="index">{{item.username}}</label>
                                <span>等{{giveTotal || 0}}人觉得赞</span>
                            </div>

                            <!--评论-->
                            <div class="comment" v-if="isActive==='pictrureComment'">
                                <el-input placeholder="请输入内容" v-model="replysTextarea1" maxlength="50"></el-input>
                                <div class="commentBtn clearFix">
                                    <!-- <el-button type="text" class="iconfont icon-icon_expression"></el-button>
                                    <el-button type="text" class="iconfont icon-aite"></el-button> -->
                                    <el-button size="small" type="primary" style="float: right" @click="replyComment()">
                                        评论</el-button>
                                </div>

                                <div class="commentContent">
                                    <div class="list" v-for="(item, index) in pictureCommentP.list" :key="index">
                                        <div class="reviewer clearFix">
                                            <div class="avatar">
                                                <el-avatar :size="50" :src="item.photo | pictureUrl"
                                                    @error="errorHandler">
                                                    <img :src="src" />
                                                </el-avatar>
                                            </div>
                                            <div class="huifuCon">
                                                <el-button type="text">{{item.username}}：</el-button>
                                                <label>{{item.content}}</label>
                                            </div>
                                        </div>
                                        <div class="huiFuTime clearFix">
                                            <label>{{item.creationtime}}</label>
                                            <!-- <el-popover placement="left" width="360" v-model="item.replysVisible"> -->
                                            <el-popover placement="left" width="360">
                                                <p>回复评论</p>
                                                <el-input type="textarea" v-model="replysTextarea" placeholder="请输入..."
                                                    maxlength="50">
                                                </el-input>
                                                <div style="text-align: right; margin: 0">
                                                    <!-- <el-button size="mini" type="text" @click="item.replysVisible = false">
                                                        取消
                                                    </el-button> -->
                                                    <el-button type="primary" size="mini" @click="replyComment(item)">回复
                                                    </el-button>
                                                </div>
                                                <el-dropdown-item slot="reference">
                                                    <el-button type="text" style="float: right;">回复</el-button>
                                                </el-dropdown-item>
                                            </el-popover>
                                            <el-popover placement="left" width="360" v-if="userInfo.id == album.userid">
                                                <p>是否确定删除？</p>
                                                <div style="text-align: right; margin: 0">
                                                    <el-button type="primary" size="mini" @click="replyDel(item)">确定删除
                                                    </el-button>
                                                </div>
                                                <el-dropdown-item slot="reference">
                                                    <el-button type="text" style="float: right;padding-right: 10px;">删除</el-button>
                                                </el-dropdown-item>
                                            </el-popover>

                                        </div>
                                        <div class="listIn" v-for="(itemIn, indexIn) in item.replys" :key="indexIn">
                                            <div class="reviewer clearFix">
                                                <div class="avatar">
                                                    <el-avatar :size="30" :src="itemIn.photo | pictureUrl"
                                                        @error="errorHandler">
                                                        <img :src="src" />
                                                    </el-avatar>
                                                </div>
                                                <div class="huifuCon">
                                                    <el-button type="text">{{itemIn.username}}</el-button>
                                                    <span>回复</span>
                                                    <el-button type="text">{{itemIn.replyName}}：</el-button><br>
                                                    <label>{{itemIn.content}}</label>
                                                    <br>
                                                </div>
                                            </div>
                                            <div class="huiFuTime clearFix">
                                                <label>{{itemIn.creationtime}}</label>
                                                <el-popover placement="left" width="360">
                                                    <p>回复评论</p>
                                                    <el-input type="textarea" v-model="replysTextarea"
                                                        placeholder="请输入..." maxlength="50">
                                                    </el-input>
                                                    <div style="text-align: right; margin: 0">
                                                        <!-- <el-button size="mini" type="text" @click="itemIn.replysVisible = false">
                                                        取消
                                                    </el-button> -->
                                                        <el-button type="primary" size="mini"
                                                            @click="replyComment(itemIn)">回复
                                                        </el-button>
                                                    </div>
                                                    <el-dropdown-item slot="reference">
                                                        <el-button type="text" style="float: right;">回复</el-button>
                                                    </el-dropdown-item>
                                                </el-popover>
                                                <el-popover placement="left" width="360" v-if="userInfo.id == album.userid">
                                                    <p>是否确定删除？</p>
                                                    <div style="text-align: right; margin: 0">
                                                        <el-button type="primary" size="mini" @click="replyDel(itemIn)">
                                                            确定删除
                                                        </el-button>
                                                    </div>
                                                    <el-dropdown-item slot="reference">
                                                        <el-button type="text" style="float: right;padding-right: 10px;">删除</el-button>
                                                    </el-dropdown-item>
                                                </el-popover>
                                            </div>
                                        </div>
                                    </div>


                                </div>

                            </div>
                            <!--转载-->
                            <div class="comment" v-if="isActive==='pictrureForward'">
                                <el-input placeholder="请输入内容" v-if="album.userid !== userInfo.id"
                                    v-model="repritTextarea" maxlength="50"></el-input>
                                <div class="commentBtn clearFix">
                                    <!-- <el-button type="text" class="iconfont icon-icon_expression"></el-button>
                                    <el-button type="text" class="iconfont icon-aite"></el-button> -->
                                    <el-button size="small" type="primary" style="float: right"
                                        v-if="album.userid !== userInfo.id && album.reprint" @click="albumReprintFriendsO()">转载
                                    </el-button>
                                </div>

                                <div class="commentContent">
                                    <div class="list" v-for="(item, index) in pictureForwardP.list" :key="index">
                                        <div class="reviewer clearFix">
                                            <div class="avatar">
                                                <el-avatar :size="50" :src="item.photo | pictureUrl"
                                                    @error="errorHandler">
                                                    <img :src="src" />
                                                </el-avatar>
                                            </div>
                                            <div class="huifuCon">
                                                <el-button type="text">{{item.username}}：</el-button>
                                                <label>{{item.content}}</label>
                                            </div>
                                        </div>
                                        <div class="huiFuTime clearFix">
                                            <label>{{item.creationtime}}</label>
                                            <!-- <el-popover placement="left" width="360" v-model="item.replysVisible"> -->
                                            <el-popover placement="left" width="360">
                                                <p>回复评论</p>
                                                <el-input type="textarea" v-model="replysTextarea" placeholder="请输入..."
                                                    maxlength="50">
                                                </el-input>
                                                <div style="text-align: right; margin: 0">
                                                    <!-- <el-button size="mini" type="text" @click="item.replysVisible = false">
                                                        取消
                                                    </el-button> -->
                                                    <el-button type="primary" size="mini" @click="replyComment(item)">回复
                                                    </el-button>
                                                </div>
                                                <el-dropdown-item slot="reference">
                                                    <el-button type="text" style="float: right;">回复</el-button>
                                                </el-dropdown-item>
                                            </el-popover>
                                            <el-popover placement="left" width="360" v-if="userInfo.id == album.userid">
                                                <p>是否确定删除？</p>
                                                <div style="text-align: right; margin: 0">
                                                    <el-button type="primary" size="mini" @click="replyDel(item)">确定删除
                                                    </el-button>
                                                </div>
                                                <el-dropdown-item slot="reference">
                                                    <el-button type="text" style="float: right;padding-right: 10px;">删除</el-button>
                                                </el-dropdown-item>
                                            </el-popover>

                                        </div>
                                        <div class="listIn" v-for="(itemIn, indexIn) in item.replys" :key="indexIn">
                                            <div class="reviewer clearFix">
                                                <div class="avatar">
                                                    <el-avatar :size="30" :src="itemIn.photo | pictureUrl"
                                                        @error="errorHandler">
                                                        <img :src="src" />
                                                    </el-avatar>
                                                </div>
                                                <div class="huifuCon">
                                                    <el-button type="text">{{itemIn.username}}</el-button>
                                                    <span>回复</span>
                                                    <el-button type="text">{{item.username}}：</el-button><br>
                                                    <label>{{itemIn.content}}</label>
                                                    <br>
                                                </div>
                                            </div>
                                            <div class="huiFuTime clearFix">
                                                <label>{{itemIn.creationtime}}</label>
                                                <el-popover placement="left" width="360">
                                                    <p>回复评论</p>
                                                    <el-input type="textarea" v-model="replysTextarea"
                                                        placeholder="请输入..." maxlength="50">
                                                    </el-input>
                                                    <div style="text-align: right; margin: 0">
                                                        <!-- <el-button size="mini" type="text" @click="itemIn.replysVisible = false">
                                                        取消
                                                    </el-button> -->
                                                        <el-button type="primary" size="mini"
                                                            @click="replyComment(itemIn)">回复
                                                        </el-button>
                                                    </div>
                                                    <el-dropdown-item slot="reference">
                                                        <el-button type="text" style="float: right;">回复</el-button>
                                                    </el-dropdown-item>
                                                </el-popover>
                                                <el-popover placement="left" width="360" v-if="userInfo.id == album.userid">
                                                    <p>是否确定删除？</p>
                                                    <div style="text-align: right; margin: 0">
                                                        <el-button type="primary" size="mini" @click="replyDel(itemIn)">
                                                            确定删除
                                                        </el-button>
                                                    </div>
                                                    <el-dropdown-item slot="reference">
                                                        <el-button type="text" style="float: right;padding-right: 10px;">删除</el-button>
                                                    </el-dropdown-item>
                                                </el-popover>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    export default {
        props: {
            sonOpenUpPhoto: Function,
            handleisShowPhotoDetail: Function,
            album: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            albumlist: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            albumlistMy: {}
        },
        computed: {
            ...mapState({
                // 权限列表
                permissionArr: state => state.commonModule.permissionArr,
                // 用户详细信息
                userInfo: state => state.userModule.userInfo,
            })
        },
        mounted() {
            this.pagePictureslist()
            if (this.album && this.albumlist.list.length > 1) {
                this.albumlist1.list = this.albumlist.list.filter(item => item.id != this.album.id)
            }
        },
        watch: {
            isActive(val) {
                this.pictrureCGF(val)
            },
            uploadTo(val) {
                this.albumlist.list.map(item => {
                    if (item.id == val) {
                        this.uploadToUrl = item.cover
                    }
                })
            },
            photoSort(val) {
                if (val) {
                    this.pagePictureslist()
                }
            }
        },
        created() {
            // console.log(this.album)
            // this.pictrureCGF()
        },
        data() {
            return {
                giveTotal: 0,
                giveActive: 1,
                albumlist1: {},
                replysTextarea: '',
                repritTextarea: '',
                replysTextarea1: '',
                reprietAlbum: false,
                reprietAlbum1: false,
                pictureIdC: null,
                albumPhotolist: {},
                photoSort: 1,
                isBatch: false,
                isEnlarge: false,
                isActive: 'pictureGive',
                checkAll: false,
                isIndeterminate: false,
                src: require("../../assets/img/headportrait01.jpg"),
                checked: false,
                photoEditing: false,
                EditingGroup: false,
                moveAlbum: false,
                pictureUpForm: {
                    picturename: "",
                    describe: ""
                },
                dialogImageUrl: '',
                dialogVisible: false,
                uploadTo: "",
                uploadToUrl: '',
                size: "",
                centerDialogVisible: false,
                photoTemporary: {},
                check: [],
                pictureGiveP: {},
                pictureCommentP: {},
                pictureForwardP: {},
                forwardTotal: 0,
                commentTotal: 0,
            }
        },
        methods: {
            // 删除评论
            replyDel(params) {
                console.log(params)
                this.$store
                    .dispatch("commentModule/replyDel", {
                        ids: params.id,
                        userid: this.userInfo.id,
                    })
                    .then(res => {
                        if (res.data.code == 200) {
                            this.$message.success('删除成功')
                            this.pageCommentlist()
                        }
                    });
            },
            photoGive(params) {
                this.$store.dispatch('photoalbumModule/photoGive', {
                    albumUserId: this.album.userid,
                    currentUserId: this.userInfo.id,
                    photoid: this.album.id,
                    pictureid: this.pictureIdC,
                    type: params,
                }).then(res => {
                    if (params == 1) {
                        this.giveActive = 0
                    } else {
                        this.giveActive = 1
                    }
                    this.pictrureCGF(this.isActive)
                })
            },
            // 图片详情转载他人图片
            albumReprintFriendsO(params) {
                if (!this.repritTextarea) {
                    this.$message.warning("转载备注不能空！")
                    return
                }
                this.reprietAlbum1 = true
                if (params == 'do') {
                    if (this.uploadTo != '') {
                        this.$store.dispatch('photoalbumModule/photoForwardO', {
                            albumId: this.uploadTo,
                            content: this.repritTextarea,
                            pictureId: this.pictureIdC,
                        }).then(res => {
                            if (res) {
                                this.reprietAlbum1 = false
                                this.$message.success('转载成功')
                                this.pictrureCGF(this.isActive)
                            }
                        })
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '请先选择转载到的相册，或先添加相册!'
                        });
                    }
                }
            },
            // 回复
            replyComment(params) {
                if (this.replysTextarea != '' || this.replysTextarea1 != '') {
                    if (params) {
                        params.replysVisible = false
                    }
                    this.$store
                        .dispatch("commentModule/addGive", {
                            commentid: params ? params.commentid : this.pictureIdC,
                            content: params ? this.replysTextarea : this.replysTextarea1,
                            type: 1,
                            parentid: params ? params.id : null,
                            userid: this.userInfo.id,
                            replyphoto: params ? params.photo : null,
                            replyName: params ? params.username || params.userName : null
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                this.$message.success('回复成功')
                                this.replysTextarea = ''
                                this.replysTextarea1 = ''
                                this.pictrureCGF(this.isActive)
                            }
                        });
                } else {
                    this.$message.success('请先输入回复内容！')
                }
            },
            // 查询评论列表
            pageCommentlist() {
                this.$store
                    .dispatch("commentModule/pageCommentlist", {
                        id: this.pictureIdC,
                    })
                    .then(res => {
                        if (res.data.code == 200) {
                            this.pictureCommentP = res.data.result
                        }
                    });
            },
            replysVisible(params) {

            },
            changeItem(params) {},
            // 点赞，评论，转发
            pictrureCGF(params) {
                let url = 'photoalbumModule/pictrureGive'
                if (params == 'pictrureComment') {
                    url = 'photoalbumModule/pictrureComment'
                } else if (params == 'pictrureForward') {
                    url = 'photoalbumModule/pictrureForward'
                }
                this.$store.dispatch(url, {
                    id: this.pictureIdC,
                    limit: 100,
                    page: 1,
                    userId: this.album.userid || this.userInfo.id,
                }).then(res => {
                    if (params == 'pictrureComment') {
                        this.pictureCommentP = res
                        this.commentTotal = this.pictureCommentP.list.length
                    } else if (params == 'pictrureForward') {
                        this.pictureForwardP = res
                        this.forwardTotal = this.pictureForwardP.list.length
                    } else {
                        this.pictureGiveP = res
                        this.giveTotal = this.pictureGiveP.list.length
                        if(this.giveTotal >0){
                            this.pictureGiveP.list.map(item =>{
                                if(item.username == this.userInfo.name || this.userInfo.username){
                                    this.giveActive = 0
                                }
                            })
                        }
                    }
                })
            },
            // 转载图片
            albumReprintFriends(params) {
                if (params == 'batch') {
                    this.reprietAlbum = true
                } else if (params == 'do') {
                    if (this.uploadTo != '') {
                        var ids = ''
                        if (this.check.length > 0) {
                            this.check.map(item => {
                                ids += ',' + item.pictureurl
                            })
                            this.$store.dispatch('photoalbumModule/albumReprintFriends', {
                                photoid: this.uploadTo,
                                pictureUrls: ids.slice(1),
                            }).then(res => {
                                if (res.data.code == 200) {
                                    this.reprietAlbum = false
                                    this.check = []
                                }
                            })
                        } else {
                            this.$message({
                                type: 'warning',
                                message: '请先选择数据!'
                            });
                        }
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '请先选择转载到的相册，或先添加相册!'
                        });
                    }
                } else {
                    if (this.albumlistMy && this.albumlistMy.list.length > 0) {
                        this.reprietAlbum = true
                        this.check.unshift(params)
                    } else {
                        this.$message.warning('请先创建相册后转载')
                    }
                }
            },
            // 照片详情放大关闭
            isEnlargeClose() {
                this.isEnlarge = false
            },
            // 照片详细切换图片
            changPhoto(params) {
                if (params + 3 > this.albumPhotolist.list.length) {}
                this.photoTemporary = this.albumPhotolist.list[params]
                this.pictureIdC = this.albumPhotolist.list[params].id
                this.pictrureCGF('pictureGive')
                this.pictrureCGF('pictrureComment')
                this.pictrureCGF('pictrureForward')
            },
            // 全选
            handleCheckChange(params) {
                if (this.check.length == this.albumPhotolist.list.length) {
                    this.isIndeterminate = true
                } else {
                    this.isIndeterminate = false
                }
            },
            // 全选框选择时触发
            handleCheckAllChange(params) {
                if (params) {
                    this.isIndeterminate = true
                    this.check = this.albumPhotolist.list
                } else {
                    this.check = []
                    this.isIndeterminate = false
                }
            },
            // 照片详情
            isBatchDetails(params) {
                if (!this.isBatch) {
                    this.pictureIdC = params.id
                    this.isEnlarge = true
                    this.pictrureCGF('pictureGive')
                    this.pictrureCGF('pictrureComment')
                    this.pictrureCGF('pictrureForward')
                    this.pageCommentlist()
                    this.photoTemporary = params

                }
            },
            // 删除图片
            batchDeletePicture(params) {
                this.$confirm('确定删除所选的' + params.picturename + '相片吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    this.$store.dispatch('photoalbumModule/batchDeletePicture', {
                        ids: params.id,
                        userid: this.userInfo.id
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.$message.success('删除成功')
                            this.pagePictureslist()
                        }
                    })
                }).catch(() => {
                    this.$message.info('已点击取消')
                });
            },
            // 打开相片编辑
            photoEditingM(params) {
                this.photoEditing = true
                if (params == 'open') {
                    this.pictureUpForm.picturename = ''
                    this.pictureUpForm.describe = ''
                } else {
                    this.pictureUpForm.picturename = params.picturename
                    this.pictureUpForm.describe = params.describe
                    this.photoTemporary = params
                }
            },
            // 打开相片编辑
            moveAlbumM(params) {
                this.moveAlbum = true
                this.photoTemporary = params
            },

            // 图片移动
            removePicture() {
                if (this.photoTemporary.id || this.check.length > 0) {
                    var ids = ''
                    if (this.check.length > 0) {
                        this.check.map(item => {
                            ids += ',' + item.id
                        })
                        ids.slice(1)
                        this.batchRemovePicture(ids)
                    } else {
                        ids = this.photoTemporary.id
                        this.batchRemovePicture(ids)
                    }
                } else {
                    this.$message.warning('请先选择相片!')
                }

            },
            // 单个，批量移动相片
            batchRemovePicture(params) {
                if (this.uploadTo != '') {
                    this.$store.dispatch('photoalbumModule/albumPhotoMove', {
                        userId: this.userInfo.id,
                        picutreIds: params,
                        albumId: this.uploadTo
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.$message.success('移动成功')
                            this.moveAlbum = false
                            this.photoTemporary = {}
                            this.check = []
                            this.pagePictureslist()
                        } else {
                            this.$message.warning(res.data.msg)
                        }
                    })
                } else {
                    this.$message.warning('请先选择移动的相册')
                }
            },
            // 图片编辑
            updatePicture() {
                if (this.photoTemporary.id || this.check.length > 0) {
                    var ids = ''
                    if (this.check.length > 0) {
                        this.check.map(item => {
                            ids += ',' + item.id
                        })
                        this.batchUpPicture(ids.slice(1))
                    } else {
                        ids = this.photoTemporary.id
                        this.batchUpPicture(ids)
                    }
                } else {
                    this.$message.warning('请先选择相片!')
                }

            },
            // 单个，批量编辑相片
            batchUpPicture(params) {
                if (this.pictureUpForm.picturename != '') {
                    this.$store.dispatch('photoalbumModule/updatePicture', {
                        describe: this.pictureUpForm.describe,
                        picturename: this.pictureUpForm.picturename,
                        ids: params,
                        photoid: this.album.id ? this.album.id : null
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.pictureUpForm = {}
                            this.$message.success('修改成功')
                            this.photoEditing = false
                            this.photoTemporary = {}
                            this.check = []
                            this.pictureUpForm.describe = ''
                            this.pictureUpForm.picturename = ''
                            this.pagePictureslist()
                        } else {
                            this.$message.warning(res.data.msg)
                        }
                    })
                } else {
                    this.$message.warning('请至少输入标题')
                }
            },
            // 我的相片列表
            pagePictureslist() {
                let loading = this.$loading({
                    lock: true,
                    text: '正在努力加载中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                this.$store.dispatch('photoalbumModule/pagePictureslist', {
                    userid: this.album.userid,
                    sort: this.photoSort,
                    id: this.album.id
                }).then(res => {
                    if (res.data.code === 200) {
                        this.albumPhotolist = res.data.result
                        loading.close()
                    }
                }).catch(err => {
                    loading.close()
                })
            },
            // 调用父组件上传图片方法
            uploadPhotosTo() {
                this.sonOpenUpPhoto(true)
            },
            // 批量删除照片
            handleDeleteRecord() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var ids = ''
                    if (this.check.length > 0) {
                        this.check.map(item => {
                            ids += ',' + item.id
                        })
                        this.$store.dispatch('photoalbumModule/batchDeletePicture', {
                            ids: ids.slice(1),
                            userid: this.userInfo.id
                        }).then(res => {
                            if (res.data.code === 200) {
                                this.$message.success('批量删除成功')
                                this.check = []
                                this.pagePictureslist()
                            }
                        })
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '请先选择数据!'
                        });
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            handleRemove(file, fileList) {},
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            errorHandler() {
                return true
            }
        }
    }
</script>

<style lang="scss" scoped>
    .text-black {
        color: rgb(170, 163, 163);
    }

    .listIn {
        .label {
            margin-right: 20px;
        }

        margin-top: 10px;
        margin-left: 20px;
        ;
        margin-right: 20px;
    }

    .floatR {
        text-align: right;
        padding-right: 50px;
        ;
    }

    .photoDetailsBox {
        .allElection {
            box-sizing: border-box;
            padding: 8px;
            background-color: #f5f7fa;

            .all {
                font-size: 14px;
                float: left;
                color: #303133;
                margin-top: 10px;
            }

            .handleList {
                float: left;
                margin-top: 5px;
                margin-left: 90px;
            }

            .finish {
                float: right;
            }
        }

        .editAlbum {
            box-sizing: border-box;
            padding: 8px;
            margin: 10px 0;

            .AlbumName {
                float: left;

                label {
                    color: #303133;
                    font-weight: bold;
                    margin-right: 14px;
                }

                span {
                    color: #909399;
                    margin-left: 100px;
                    font-size: 12px;
                }
            }

            .crumbs {
                float: right;
                margin-top: 12px;
                -moz-user-select: none;
                /*火狐*/
                -webkit-user-select: none;
                /*webkit浏览器*/
                -ms-user-select: none;
                /*IE10*/
                -khtml-user-select: none;
                /*早期浏览器*/
                user-select: none;

                label {
                    margin: 0 10px;
                }

                i {
                    cursor: pointer;
                }
            }
        }

        .coverVisitors {
            margin: 10px 0;

            .cover {
                float: left;
                width: 120px;
                height: 120px;
            }

            .className {
                height: 120px;
                float: left;
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                text-align: left;
                margin-left: 10px;

                .name {
                    label {
                        /*font-size: 16px;*/
                        color: #303133;
                        font-weight: bold;
                    }

                    span {
                        font-size: 14px;
                    }

                    .number {
                        margin-left: 10px;
                        color: #303133;
                    }

                    .line {
                        color: #303133;
                        margin: 0 10px;
                    }

                    .dropdownLink {
                        cursor: pointer;
                        color: #909399;
                    }
                }

                .uploadBtnBox {}
            }

            .visitors {
                float: right;
                margin-top: 10px;

                .list {
                    float: left;

                    label {
                        color: #303133;
                        display: block;
                        box-sizing: border-box;
                        padding: 0 15px;
                        margin-bottom: 5px;
                        font-weight: bold;
                    }

                    span {
                        color: #303133;
                        font-size: 14px;
                    }
                }

                .list:nth-of-type(1) label {
                    // border-left: 1px solid #303133;
                    border-right: 1px solid #303133;
                }
            }
        }

        .photoBox {
            list-style-type: none;
            margin-block-start: 0;
            margin-block-end: 0;
            padding-inline-start: 0;
            border-top: 1px solid #303133;
            box-sizing: border-box;
            padding-top: 10px;

            .photoList {
                box-sizing: border-box;
                padding: 8px;
                background-color: #f5f7fa;
                float: left;
                margin: 0 10px 10px 0;

                .photo {
                    position: relative;
                    width: 192px;
                    height: 182px;
                    overflow: hidden;

                    .check {
                        position: absolute;
                        top: -2px;
                        left: 1px;
                    }

                    .edit {
                        position: absolute;
                        top: 0px;
                        right: 0;
                        cursor: pointer;
                        transition: top .3s;

                        i {
                            font-size: 18px;
                        }
                    }

                    .fabulous {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        box-sizing: border-box;
                        padding: 10px 5px;
                        background-color: rgba(255, 255, 255, .6);
                        font-size: 14px;
                        color: #303133;
                        opacity: 0;
                        transition: opacity .3s;

                        .comment {
                            float: right;
                        }

                        .fabu {
                            float: left;
                        }
                    }
                }

                .photo:hover .fabulous {
                    opacity: 1;
                }

                .describe {
                    font-size: 14px;
                    color: #303133;
                    margin-top: 10px;

                }
            }
        }

        .uploadPhotosBox {
            .uploadTo {
                .sizeLeft {
                    margin-left: 22px;
                }
            }

            .uploadList {
                margin: 15px 0;
                box-sizing: border-box;
                padding: 5px;
                background-color: #f5f7fa;
            }

            .btn {
                label {
                    margin-left: 15px;
                }
            }
        }

        .chooseAlbumBox {
            .establish {
                float: left;
                margin: 0 10px 10px 0;

                .cover,
                .establish_icon {
                    float: left;
                    width: 175px;
                    height: 175px;
                }

                .cover {
                    position: relative;
                }

                .checked {
                    position: absolute;
                    top: 0;
                    right: 0;

                    i {
                        font-size: 32px;
                        color: #13ce66;
                    }
                }

                .establish_icon {
                    background-color: #fbfdff;
                    // border: 1px dashed #c0ccda;
                    border-radius: 6px;
                    line-height: 140px;
                    text-align: center;
                    cursor: pointer;

                    i {
                        font-size: 32px;
                    }
                }

                .albumNameEs {
                    float: left;
                    margin: 50px 0 0 10px;
                }

                .albumName {
                    float: left;
                    margin: 40px 0px 0 10px;

                    label {
                        display: block;
                    }

                    label:last-of-type {
                        margin-top: 10px;
                        font-size: 12px;
                    }
                }
            }
        }

        .enlargeBox {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .3);

            .enlargeInner {
                width: 70%;
                margin: 0 auto;
                margin-top: 10vh;

                .enlarge {
                    width: 100%;
                    float: left;
                }

                .enlargeDetails {
                    width: 95%;
                    height: 70vh;
                    overflow-y: auto;
                    float: right;
                    background-color: white;
                    position: relative;

                    .close {
                        position: absolute;
                        top: 0;
                        right: 0;
                        font-size: 24px;
                        color: #e6a23c;
                        cursor: pointer;
                    }

                    .photoDescription {
                        box-sizing: border-box;
                        padding: 10px 8px;

                        .avatar {
                            float: left;
                        }

                        .photoBy {
                            float: left;
                            text-align: left;
                            color: #303133;
                            margin-left: 5px;

                            label {
                                display: block;
                            }

                            .byName {
                                font-size: 14px;
                                font-weight: bold;
                            }

                            .uploadTiem,
                            .comefrom {
                                font-size: 12px;
                            }
                        }
                    }

                    .describe {
                        font-size: 14px;
                        color: #303133;
                        text-align: left;
                        box-sizing: border-box;
                        padding: 0 8px;
                        text-indent: 24px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #303133;
                    }

                    .forwardBox {
                        box-sizing: border-box;
                        padding: 10px;
                        font-size: 14px;
                        color: #303133;
                        text-align: left;

                        label {
                            cursor: pointer;

                            span {
                                display: inline-block;
                                margin: 0 3px;
                            }
                        }

                        label.active {
                            color: #409EFF;
                        }
                    }

                    .dianZan {
                        font-size: 14px;
                        text-align: left;
                        box-sizing: border-box;
                        padding: 0 8px;

                        label {
                            color: #409EFF;
                            margin-left: 5px;
                        }

                        span {
                            color: #303133;
                        }
                    }

                    .comment {
                        box-sizing: border-box;
                        padding: 0 8px;

                        .commentBtn {
                            text-align: left;
                            margin-top: 10px;
                        }

                        .commentContent {
                            .list {
                                border-bottom: 1px solid #909399;
                                margin-bottom: 10px;

                                .avatar {
                                    float: left;
                                }

                                .huifuCon {
                                    margin-left: 5px;
                                    float: left;
                                    font-size: 14px;
                                    color: #303133;
                                    // width: 320px;
                                    text-align: left;

                                    span {
                                        display: inline-block;
                                        margin: 5px;
                                    }
                                }

                                .huiFuTime {
                                    font-size: 14px;
                                    color: #303133;

                                    label {
                                        float: left;
                                        margin-top: 14px;

                                        span {
                                            display: inline-block;
                                            margin-left: 5px;
                                        }
                                    }
                                }
                            }

                        }

                    }
                }
            }
        }

        .clearFix::after {
            content: "";
            display: block;
            width: 100%;
            font-size: 0;
            clear: both;
        }

    }
</style>